<template>
  <div>
    <div class="code-box">
      <div class="code-left">
        <div class="paging-data-box">
          <div v-for="item in pagingData " :key="item.id">{{ item.text }}</div>
        </div>
        <el-pagination :current-page.sync="queryInfo.current" :page-size="queryInfo.size" :page-sizes="[10, 20, 30, 40]"
          layout="total, prev, pager, next, jumper,sizes" :total="total" @current-change="handleCurrentChange"
          @size-change="handleSizeChange" />
      </div>
      <div class="code-right">
        <mavon-editor class="markdown-body" codeStyle="monokai" v-html="codeData"
          :externalLink="externalLink"></mavon-editor>
      </div>
    </div>
  </div>
</template>
  
<script>
import { getPaging } from '@/api/codeExamples'
export default {
  name: 'CodePagination',
  data() {
    return {
      externalLink: {
        markdown_css: function () {
          // 这是你的markdown css文件路径
          return "/mavon-editor/markdown/github-markdown.min.css";
        },
        hljs_js: function () {
          // 这是你的hljs文件路径
          return "/mavon-editor/highlightjs/highlight.min.js";
        },
        hljs_css: function (css) {
          // 这是你的代码高亮配色文件路径
          return "/mavon-editor/highlightjs/styles/" + css + ".min.css";
        },
        hljs_lang: function (lang) {
          // 这是你的代码高亮语言解析路径
          return "/mavon-editor/highlightjs/languages/" + lang + ".min.js";
        },
        katex_css: function () {
          // 这是你的katex配色方案路径路径
          return "/mavon-editor/katex/katex.min.css";
        },
        katex_js: function () {
          // 这是你的katex.js路径
          return "/mavon-editor/katex/katex.min.js";
        },
      },
      queryInfo: {
        current: 1,
        size: 10,
      },
      total: 0,
      pagingData: {},
    }
  },
  props: {
    codeData: {
      type: String,
    },
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getPaging(this.queryInfo)
      this.pagingData = res.data.pagingData
      this.total = res.data.total
    },
    handleCurrentChange() {
      this.getList()
    },
    handleSizeChange(val) {
      this.queryInfo.size = val
      this.getList()
    },
  },
}
</script>
  
<style lang='scss' scoped>
.paging-data-box {
  width: 538px;
  height: 280px;
  overflow: auto;
}

.el-pagination {
  margin-top: 10px;
}
</style>